<template>
  <div>
    <h1 class="hhh" style="text-align:center">加班报销统计金额</h1>
    <div v-if="this.tableData.length>1">
      <div class="title">
        <span style="font-size:3px;margin-left:-5px;color:grey;">日期</span>
        <span style="font-size:3px;margin-left:29px;color:grey;">金额</span>
        <div style="font-size:3px;margin-left:107px;margin-top:-55px;">
          <span style="font-size:3px;color:grey;">人员</span>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" border
                size="mini">
        <el-table-column label="" prop="theTime" width="163px"></el-table-column>
        <template v-for="item in titleData">
          <el-table-column :label="item.name" :prop="item.name"></el-table-column>
        </template>
        <el-table-column label="总计" prop="theAll" width="150"></el-table-column>
      </el-table>
    </div>
    <div v-if="this.tableData.length<1||this.tableData.length==1"
         style="border:black soild 0px;height:200px;width:200px;margin:auto;text-align:center">
      <span style="font-size:25px;">暂无数据</span>
    </div>


  </div>
</template>
<script>
  export default {
    data() {
      return {
        titleData: [],
        tableData: [],
      }
    },
    mounted: function () {
      this.loadtitleData();
    },
    methods: {
      loadtitleData() {
        var _this = this;
        this.postRequest("/accountTable/getUser", {
          depno: this.depno,
          endtime: this.endtime,
          starttime: this.starttime,
          projectNumber: this.projectNumber,
          positionid: this.positionid
        }).then(resp => {
          if (resp && resp.status == 200) {
            _this.titleData = resp.data;
            _this.loadTableData()
          }
        })
      },
      loadTableData() {
        var _this = this;
        this.postRequest("/accountTable/getMoney", {
          depno: this.depno,
          starttime: this.starttime,
          endtime: this.endtime,
          projectNumber: this.projectNumber,
          positionid: this.positionid,
        }).then(resp => {
          if (resp && resp.status == 200) {
            _this.tableData = resp.data;
          }
        })
      },

      /*   test(){
           
            require.ensure([], () => {
                const { export_json_to_excel } = require('@/vendor/Export2Excel')
                const tHeader = []
                tHeader.push('时间/姓名')
                const filterVal = ['theTime']
                this.titleData.forEach(function(item){
                    tHeader.push(item.name)
                    filterVal.push(item.name)
                })
                tHeader.push('总计')
                filterVal.push('theAll')
                const list = this.tableData
                const data = this.formatJson(filterVal, list)
                export_json_to_excel(tHeader, data, '报销单excel')
            }) 
        }, */
      test() {
        var url = "/accountTable/download?depno=" + this.depno + "&starttime=" + this.starttime + "&endtime=" + this.endtime
        window.location.href = url;

      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      createdTimeFormart() {
        let date = new Date();
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = (m < 10 ? '0' + m : m);
        let d = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
        return y + '-' + m + '-' + d + ' ' + h;
      },
      loadTableTitleDataByExpenseId(value) {
        var _this = this;
        this.postRequest("/accountTable/getUserByExpenseId", {expenseIds: value}).then(resp => {
          if (resp && resp.status == 200) {
            _this.titleData = resp.data;
            _this.loadTableDataByExpenseId(value)
          }
        })
      },
      loadTableDataByExpenseId(value) {
        var _this = this
        this.postRequest("/accountTable/getMoneyByExpenseId", {expenseIds: value}).then(
          resp => {
            if (resp && resp.status == 200) {
              _this.tableData = resp.data;
            }
          }
        )
      }
    },
    props: {
      depno: {
        type: Number,
        default: 0
      },
      starttime: {
        type: String,
        default: ''
      },
      endtime: {
        type: String,
        default: ''
      },
      expense_ids: {
        type: Array,
        default: []
      },
      projectNumber: {
        type: String,
        default: ''
      },
      positionid: {
        type: Array,
        default: null
      }
    },
    watch: {
      depno: function (value, oldValue) {
        this.loadtitleData();
      },
      starttime: function (value, oldValue) {
        this.loadtitleData();
      },
      endtime: function (value, oldValue) {
        this.loadtitleData();
      },
      expense_ids: function (value, oldValue) {
        if (value.length > 0) {
          this.loadTableTitleDataByExpenseId(value)
        } else {
          this.loadtitleData()
        }
      },
      projectNumber: function (value, oldValue) {
        this.loadtitleData();
      },
      positionid: function (value, oldValue) {
        this.loadtitleData();
      }
    }
  }
</script>
<style lang="css" scoped>
  .title {

    position: relative;

    margin-left: 0px;
    margin-bottom: -36px;
    z-index: 1000;
    width: 163px;

    height: 37px;

    box-sizing: border-box;

    border: 0px solid rgb(224, 223, 223);

    background-color: white;

    line-height: 45px;

    text-indent: 5px;

    background: linear-gradient(12deg, transparent 49.5%, rgb(155, 154, 154) 49.5%, rgb(155, 154, 154) 50.5%, transparent 50.5%);
  }

  .title::before {

    content: "";

    position: absolute;

    left: -62px;

    top: -30px;

    width: 100%;

    height: 50px;

    box-sizing: border-box;

    border-bottom: 1px solid rgb(155, 154, 154);

    transform-origin: bottom center;
    transform: rotateZ(45deg) scale(0.3);

    animation: slash 1s infinite ease;

  }

  @keyframes slash {
    100% {

      transform: rotateZ(45deg) scale(0.3);

    }

  }
</style>

